<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.css">
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			padding-bottom: 90px;
			padding-top: 43px;
			background-color: white;
		}

		#slider {
			background-color: #950000;
			overflow: hidden;

		}

		.mui-slider-indicator {
			bottom: 40px;
		}

		.Server {
			height: 150px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
		}

		.ServerItem {
			width: 65px;
			height: 50%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
			padding-top: 20px;
			margin-left: 15px;
		}
		.ServerItem img {
			width: 50px;
		}

		.ServerItem p {
			font-size: 13px;
			color: black;
		}

		.GGSHOW {
			margin-top: 20px;
			height: 90px;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.GGSHOW img {
			width: 100%;
			height: 100%;
		}

		.HotListSales {
			width: 85%;
			margin: 10px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.HotListSales p {
			color: black;
			font-size: 15px;
			letter-spacing: 1px;
		}
		.Image{
			height: 180px;
			overflow: hidden;
		}
		.HotListitem{
			margin: 10px auto;
			height: 120px;
		}
		.HotListitemLeft{
			width: 40%;
			height: 100%;
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.HotListitemLeft img{
			border-radius: 5px;
			width: 90%;
			height: 90%;
		}
		.HotListitemRight{
			padding-top: 10px;
			
		}
		.HotListitemRightTitle{
			font-size: 18px;
			color: black;
			letter-spacing: 2px;
		}
	</style>

	<body id="body" >
		<header class="mui-bar mui-bar-nav" style="background-color: #950000;">
			<h1 class="mui-title" style="color: white;">UrShop商城</h1>
		</header>
		<div class="mui-input-row mui-search"
			style="background-color: #950000;display: flex;justify-content: center;align-items: center;">
			<input type="search" class="mui-input-clear mui-block" placeholder="搜一搜"
				style="background-color: white;border-radius: 25px;" onfocus="ClickSearch()">
		</div>
		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop" id="banner">

			</div>
			<div class="mui-slider-indicator" id="dian">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<!-- 服务入口 -->
		<div class="Server" id="server">
		</div>
		<!--广告展示 -->
		<div class="GGSHOW">
			<img src="./images/屏幕截图 2023-12-05 101953.png" alt="">
		</div>
		<!-- 热榜销售 -->
		<div class="HotListSales">
			<p>热销榜单</p>
			<p>查看更多></p>
		</div>
		<div class="HotList" id="hostlist">
			
		</div>
		<!-- 底部导航 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home" style="color: red;"></span>
				<span class="mui-tab-label" style="color: red;">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-bars"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-pengyouquan"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script src="url.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.js"></script>
		<script>
			var item = document.getElementsByClassName("mui-tab-item")
			var Toarr = ["home.html", "sort.html", "shop.html", "mine.html"];
			for (let i = 0; i < item.length; i++) {
				item[i].onclick = function() {
					mui.openWindow({
						url: Toarr[i]
					})
				}
			}
		</script>
		<script type="text/javascript">
			mui.init()
			
			
			function ClickSearch()
			{
				window.location.href = "search.html"
			}
			var body = document.getElementById("body")
			body.onload = function() {
				getBannerList()
				getSortList()
				getHotShopList()
			}
			
			/**
			 * 获取热销榜单
			 */
			function getHotShopList()
			{
				
				var hostlist = document.getElementById("hostlist")
				var list = new XMLHttpRequest
				list.open("GET",url+"Shop.Shop/getHotShopList")
				list.send()
				list.onload = function()
				{
					var data = JSON.parse(list.responseText)
					var content =""
					for(var a =0 ; a < data.data.length;a++)
					{
						content+='<div class="HotListitem"><div class="HotListitemLeft"><img src="'+imgUrl+data.data[a].shop_img+'" alt=""></div><div class="HotListitemRight"><p class="HotListitemRightTitle">'+data.data[a].shop_name+'</p><p class="HotListitemRightPrice">价格:'+data.data[a].shop_price+'</p><p class="HotListitemRightSold">已售:'+data.data[a].shop_sold+'</p></div></div>'
					}
					hostlist.innerHTML =content
					var HotListitem = document.getElementsByClassName("HotListitem")
					for(let a = 0 ;a < HotListitem.length;a++)
					{
						HotListitem[a].onclick = function()
						{
							location.href = "shopitem.html?id="+data.data[a].shop_id
						}
					}
				}
			}
			
			
			/**
			 * 获取类型列表
			 */
			function getSortList() {
				var server = document.getElementById("server")
				var list = new XMLHttpRequest
				list.open("GET", url + "Shopsort.Shopsort/getShopsortList")
				list.send()
				list.onload = function() {
					var data = JSON.parse(list.responseText)
					var content = ""
					for (var i = 0; i < data.data.length; i++) {
						content += '<div class="ServerItem"><img src="' + imgUrl + data.data[i].shopsort_img +
							'" alt=""><p>' + data.data[i].shopsort_name + '</p></div>'
					}
					server.innerHTML = content
					var ServerItem = document.getElementsByClassName("ServerItem")
					for(let a =0 ; a< ServerItem.length;a++)
					{
						ServerItem[a].onclick = function()
						{
							window.location.href="sort.html"
						}
					}
					
				}
			}
			/**
			 * 获取轮播图列表
			 */
			function getBannerList() {
				var list = new XMLHttpRequest
				var banner = document.getElementById("banner")
				var dian = document.getElementById("dian")
				list.open("GET", url + "Bannerapi.Bannerapi/getBannerapiList")
				list.send()
				list.onload = function() {
					var data = JSON.parse(list.responseText)
					var content = ""
					var diancontent = ""
					for (var i = 0; i < data.data.length; i++) {
						content += '<div class="mui-slider-item"><a href="'+data.data[i].bannerapi_to+'"><img class="Image" src="' + imgUrl + data.data[i]
							.bannerapi_img + '"></a></div>'
					}
					for (var i = 1; i < data.data.length; i++) {
						diancontent += '<div class="mui-indicator"></div>'
					}
					var dianall = '<div class="mui-indicator mui-active"></div>' + diancontent
					var all =
						'<div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"><img src=""> </a></div>' +
						content +
						'<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src=""> </a></div>'
					dian.innerHTML = dianall
					banner.innerHTML = all


					mui("#slider").slider({
						interval: "3000"
					})

				}
			}
		</script>
	</body>

</html>
